<template>
	<view class="oa-content">

		<view class="tn-margin" style="background-color: #FFFFFF;padding: 20rpx 30rpx 20rpx 30rpx;position: relative;">
			<view class="tn-main-gradient-blue"
				style="width: 82rpx;height: 68rpx;position: absolute;top: 0;left:0;border-radius: 0 0 100rpx 0;z-index: 0;opacity: 0.6;">
			</view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center"
				style="padding: 0rpx 0rpx 20rpx 0rpx;position: relative;">
				<view class="justify-content-item tn-text-justify">
					<text class="tn-text-xl tn-padding-right tn-color-white" style="margin-left: -20rpx;">01</text>
					<text class="tn-text-bold tn-text-lg tn-color-indigo">校园跑腿项目【会员已开放】</text>
				</view>
			</view>
			<view class="tn-margin-sm tn-text-sm">
				该项目已经完成了核心功能的开发，包括用户下单、跑腿员接单、云打印、订单跟踪、社交圈子等相关功能。
			</view>
		</view>

		<view class="tn-margin" style="background-color: #FFFFFF;padding: 20rpx 30rpx 20rpx 30rpx;position: relative;">
			<view class="tn-main-gradient-blue"
				style="width: 82rpx;height: 68rpx;position: absolute;top: 0;left:0;border-radius: 0 0 100rpx 0;z-index: 0;opacity: 0.6;">
			</view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center"
				style="padding: 0rpx 0rpx 20rpx 0rpx;position: relative;">
				<view class="justify-content-item tn-text-justify">
					<text class="tn-text-xl tn-padding-right tn-color-white" style="margin-left: -20rpx;">02</text>
					<text class="tn-text-bold tn-text-lg tn-color-indigo">手办盲盒项目【会员已开放】</text>
				</view>
			</view>
			<view class="tn-margin-sm tn-text-sm">
				手办盲盒小程序已经上线，并受到了用户的热烈欢迎。我们根据用户反馈，不断优化盲盒抽取机制和商品展示方式，提升用户的购买体验。
			</view>
		</view>
		<view class="tn-margin" style="background-color: #FFFFFF;padding: 20rpx 30rpx 20rpx 30rpx;position: relative;">
			<view class="tn-main-gradient-blue"
				style="width: 82rpx;height: 68rpx;position: absolute;top: 0;left:0;border-radius: 0 0 100rpx 0;z-index: 0;opacity: 0.6;">
			</view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center"
				style="padding: 0rpx 0rpx 20rpx 0rpx;position: relative;">
				<view class="justify-content-item tn-text-justify">
					<text class="tn-text-xl tn-padding-right tn-color-white" style="margin-left: -20rpx;">03</text>
					<text class="tn-text-bold tn-text-lg tn-color-indigo">超市自配送小程序【会员已开放】</text>
				</view>
			</view>
			<view class="tn-margin-sm tn-text-sm">
				该项目已经完成了在线采购、在线下单、商品管理、订单处理等基本功能。完善配送系统，为用户提供更加便捷的自配送服务。
			</view>
		</view>
		
		
		<view class="tn-margin" style="background-color: #FFFFFF;padding: 20rpx 30rpx 20rpx 30rpx;position: relative;">
			<view class="tn-main-gradient-blue"
				style="width: 82rpx;height: 68rpx;position: absolute;top: 0;left:0;border-radius: 0 0 100rpx 0;z-index: 0;opacity: 0.6;">
			</view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center"
				style="padding: 0rpx 0rpx 20rpx 0rpx;position: relative;">
				<view class="justify-content-item tn-text-justify">
					<text class="tn-text-xl tn-padding-right tn-color-white" style="margin-left: -20rpx;">04</text>
					<text class="tn-text-bold tn-text-lg tn-color-indigo">线考试系统小程序【会员已开放】</text>
				</view>
			</view>
			<view class="tn-margin-sm tn-text-sm">
				该项目有知识库、题库、在线组卷、自动组卷、在线模拟、在线练习、考试分析、学生管理等基本功能。是一个功能全面、用户友好的在线教育应用，能够满足用户在线学习和考试的需求，提高学习效果和考试通过率。
			</view>
		</view>

		<view class="tn-margin" style="background-color: #FFFFFF;padding: 20rpx 30rpx 20rpx 30rpx;position: relative;">
			<view class="tn-main-gradient-blue"
				style="width: 82rpx;height: 68rpx;position: absolute;top: 0;left:0;border-radius: 0 0 100rpx 0;z-index: 0;opacity: 0.6;">
			</view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center"
				style="padding: 0rpx 0rpx 20rpx 0rpx;position: relative;">
				<view class="justify-content-item tn-text-justify">
					<text class="tn-text-xl tn-padding-right tn-color-white" style="margin-left: -20rpx;">05</text>
					<text class="tn-text-bold tn-text-lg tn-color-indigo">物业系统项目【会员已开放】</text>
				</view>
			</view>
			<view class="tn-margin-sm tn-text-sm">
				该项目有社区服务、 物业服务、 便民服务、通知公告、 社区活动、 我的房屋、投诉建议、 在线报修、红色服务、小区置物等功能。是一个功能全面的社区物业项目。
			</view>
		</view>

		<view class="tn-margin" style="background-color: #FFFFFF;padding: 20rpx 30rpx 20rpx 30rpx;position: relative;">
			<view class="tn-main-gradient-blue"
				style="width: 82rpx;height: 68rpx;position: absolute;top: 0;left:0;border-radius: 0 0 100rpx 0;z-index: 0;opacity: 0.6;">
			</view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center"
				style="padding: 0rpx 0rpx 20rpx 0rpx;position: relative;">
				<view class="justify-content-item tn-text-justify">
					<text class="tn-text-xl tn-padding-right tn-color-white" style="margin-left: -20rpx;">06</text>
					<text class="tn-text-bold tn-text-lg tn-color-indigo">移动端官网【会员已开放】</text>
				</view>
			</view>
			<view class="tn-margin-sm tn-text-sm">
				集成了众多功能模块，包括产品展示、在线咨询、在线采购、售后服务等，为企业提供了一个完整的业务处理流程。
			</view>
		</view>
		<view class="tn-margin" style="background-color: #FFFFFF;padding: 20rpx 30rpx 20rpx 30rpx;position: relative;">
			<view class="tn-main-gradient-blue"
				style="width: 82rpx;height: 68rpx;position: absolute;top: 0;left:0;border-radius: 0 0 100rpx 0;z-index: 0;opacity: 0.6;">
			</view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center"
				style="padding: 0rpx 0rpx 20rpx 0rpx;position: relative;">
				<view class="justify-content-item tn-text-justify">
					<text class="tn-text-xl tn-padding-right tn-color-white" style="margin-left: -20rpx;">07</text>
					<text class="tn-text-bold tn-text-lg tn-color-indigo">小程序知识付费【会员已开放】</text>
				</view>
			</view>
			<view class="tn-margin-sm tn-text-sm">
				结合了课程视频和在线考试等功能，为用户提供全方位的学习体验的知识付费小程序。
			</view>
		</view>
		
		
		
		

		<view class="tn-padding">
			<view class="button-number tn-flex tn-flex-row-between tn-flex-col-center"
				style="background: linear-gradient(-120deg, #99E3FE, #C9ECFF, #C9ECFF);">

				<view class="tn-margin-left">
					<view class="tn-flex tn-flex-col-center">
						<text class="tn-text-bold tn-text-xl" style="color: #0D80E8;">更多开源项目更新中</text>
					</view>
					<view class='tn-text-sm tn-margin-top-sm' style="color: #0D80E8;">想了解更多开源项目信息？请联系我们！</view>
				</view>
				<view class="tn-margin-right button-shake">
					<tn-button shape="round" backgroundColor="#3668FC" fontColor="#FFFFFF" padding="10rpx 0"
						width="160rpx" shadow @click="boda()">
						<text class="tn-text-bold">咨 询</text>
						<text class="tn-icon-right-fill tn-padding-left-xs tn-text-lg"></text>
					</tn-button>
				</view>


			</view>
		</view>

		<tn-modal v-model="show1" :custom="true">
			<view class="custom-modal-content">
				<image src='https://ui.yunchencloud.cn/img/wx.jpg' mode='aspectFill' style="width: 100%;"></image>
				<view class="tn-text-center tn-padding-top">
					<text class="">客服微信：xinfeng0921 </text>
					<!-- <text class="tn-color-blue--disabled tn-padding-left-xs tn-text-df tn-icon-copy"></text> -->
				</view>
				<view class="tn-text-center tn-padding-top tn-text-md tn-color-orangered">会员可免费获取源码</view>
			</view>
		</tn-modal>
		<view class="tn-tabbar-height"></view>

	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateContent',
		mixins: [template_page_mixin],
		data() {
			return {
				show1: false,

				// tn-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '',

			}
		},
		methods: {
			boda() {
				this.show1 = true;
			}




		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 60%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

	}

	.oa-content {
		background-color: #F8F7F8;
		min-height: 100vh;
		padding-bottom: 60rpx;
		padding-bottom: calc(80rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(80rpx + constant(safe-area-inset-bottom));
	}


	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.button-shake {
		animation: shake 4s infinite;
	}

	@keyframes shake {

		5%,
		50% {
			transform: scale(1);
		}

		10% {
			transform: scale(0.9);
		}

		15% {
			transform: scale(1.15);
		}

		20% {
			transform: scale(1.15) rotate(-5deg);
		}

		25% {
			transform: scale(1.15) rotate(5deg);
		}

		30% {
			transform: scale(1.15) rotate(-3deg);
		}

		35% {
			transform: scale(1.15) rotate(2deg);
		}

		40% {
			transform: scale(1.15) rotate(0);
		}
	}



	/* 背景波浪高度 */
	.button-number {
		width: 100%;
		height: 150rpx;
		border-radius: 15rpx;
		position: relative;
		z-index: 1;
	}

	/* 动态背景波浪*/
	@keyframes move_wave {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1)
		}

		50% {
			transform: translateX(-25%) translateZ(0) scaleY(1)
		}

		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1)
		}
	}

	.tnwave {
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		z-index: -1;
		border-radius: 15rpx;
	}

	.waveWrapperInner {
		position: absolute;
		width: 100%;
		overflow: hidden;
		height: 100%;
	}

	.wave {
		position: absolute;
		left: 0;
		width: 200%;
		height: 100%;
		background-repeat: repeat no-repeat;
		background-position: 0 bottom;
		transform-origin: center bottom;
	}

	.bgTop {
		opacity: 0.1;
	}

	.waveTop {
		background-size: 50% 45px;
	}

	.waveAnimation .waveTop {
		animation: move_wave 4s linear infinite;
	}

	.bgMiddle {
		opacity: 0.2;
	}

	.waveMiddle {
		background-size: 50% 40px;
	}

	.waveAnimation .waveMiddle {
		animation: move_wave 3.5s linear infinite;
	}

	.bgBottom {
		opacity: 0.3;
	}

	.waveBottom {
		background-size: 50% 35px;
	}

	.waveAnimation .waveBottom {
		animation: move_wave 2s linear infinite;
	}
</style>